import React, { Component } from 'react';
import PropType from 'prop-types'
import Tips from './Tips'
import '../styles/auto_complete.css'
class AutoComplete extends Component {
    constructor (props) {
        super(props)
        this.state = {
            input: ''
        }
    }
    handleInputChange (e) {
        this.setState({
            input: e.target.value
        })
        if (this.props.getInput) {
            this.props.getInput(e.target.value)
        }
    }
    handleSelectValue(item) {
        if (this.props.getSelect) {
            this.props.getSelect(item)
        }
    }
    render () {
        const list = this.props.list
        return (
            <div className="auto_complete">
                <div className="auto_input">
                <input 
                    value = {this.state.input}
                    onChange={this.handleInputChange.bind(this)}
                    placeholer="请输入关键词"/>
                </div>
                <div className="auto_complete_data">
                    <Tips 
                        value={this.handleSelectValue.bind(this)}
                        list={list}/>
                        {this.props.children}
                </div>
            </div>
        )
    }
}
// 数据来源类型校验
AutoComplete.propTypes = {
    list: PropType.array
}
// 给定数据的默认值
AutoComplete.defaultProps = {
    list: []
}

export default AutoComplete